<template>
  <div id="iv">
    <div style="position: relative;background: #000; width: 100%; text-align: center;">
      <img v-bind:src="imagePath" v-bind:style="{width: scale+'%'}" />
      <img src="../assets/close.png" style="position: absolute; right: 10px; top: 10px;cursor: pointer;" @click="close" />
      <div class="operation-wrap">
        <img src='../assets/fangda.png' style="cursor: pointer;" @click="scaleUp" />
        <img src='../assets/suoxiao.png' style="cursor: pointer;" @click="scaleDown" />
      </div>
    </div>
  </div>
</template>
<script>
  
  export default {
    name: 'iv',
    data: function() {
      return {
        msg: '',
        scale: 60
      }
    },
    methods: {
      scaleUp: function() {
        if(this.scale < 100) {
          this.scale += 10
        }
      },
      scaleDown: function() {
        if(this.scale > 60) {
          this.scale -= 10
        }
      },
      close: function() {
        this.$emit('close');
      }
    },
    props: {
      imagePath: String
    }
  }
  
</script>
<style scoped="scoped">
  #iv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .operation-wrap {
    position: absolute;
    bottom: 10px;
    left: 1%;
    right: 1%;
    text-align: center;
  }
</style>